<template>
  <view>
    <view class="flex justify-between text-24rpx gap-16rpx">
      <view
        class="tab-item"
        :class="{ active: currTab === index }"
        v-for="(item, index) in todayOptions"
        :key="index"
        @click="handleChangeTab(index)"
      >
        <view class="mb-8rpx">{{ item.label }}</view>
        <view class="">{{ item.value.toFixed(2) }}</view>
      </view>
    </view>

    <!-- 营业额tab -->
    <view
      v-show="currTab === 0"
      class="tab-box grid grid-cols-2 grid-rows-3 gap-row-20rpx"
    >
      <view class="tab-box-item">
        <view class="text-24rpx">店铺线上营业额</view>
        <view class="text-28rpx">{{
          revenueData.onlineRevenue.toFixed(2)
        }}</view>
      </view>
      <view class="tab-box-item">
        <view class="text-24rpx">退款线上金额</view>
        <view class="text-28rpx">{{
          revenueData.onlineRefund.toFixed(2)
        }}</view>
      </view>
      <view class="tab-box-item">
        <view class="text-24rpx">店铺线下营业额</view>
        <view class="text-28rpx">{{
          revenueData.offlineRevenue.toFixed(2)
        }}</view>
      </view>
      <view class="tab-box-item">
        <view class="text-24rpx">退款线下金额</view>
        <view class="text-28rpx">{{
          revenueData.offlineRefund.toFixed(2)
        }}</view>
      </view>
      <view class="tab-box-item">
        <view class="text-24rpx">店铺大额营业额</view>
        <view class="text-28rpx">{{ revenueData.bigRevenue.toFixed(2) }}</view>
      </view>
      <view class="tab-box-item">
        <view class="text-24rpx">退款大额金额</view>
        <view class="text-28rpx">{{ revenueData.bigRefund.toFixed(2) }}</view>
      </view>
    </view>

    <!-- 订单数tab -->
    <view v-show="currTab === 1" class="tab-box flex gap-50rpx">
      <view class="tab-box-item flex items-center gap-16rpx">
        <view class="text-24rpx">收款订单数：</view>
        <view class="text-28rpx">{{ orderData.receiptOrders }}</view>
      </view>
      <view class="tab-box-item flex items-center gap-16rpx">
        <view class="text-24rpx">退款订单数：</view>
        <view class="text-28rpx">{{ orderData.refundOrders }}</view>
      </view>
    </view>

    <!-- 金额tab -->
    <view v-show="currTab === 2" class="tab-box flex gap-50rpx">
      <view class="tab-box-item flex items-center gap-16rpx">
        <view class="text-24rpx">收款金额：</view>
        <view class="text-28rpx">{{
          amountData.receiptAmount.toFixed(2)
        }}</view>
      </view>
      <view class="tab-box-item flex items-center gap-16rpx">
        <view class="text-24rpx">退款金额：</view>
        <view class="text-28rpx">{{ amountData.refundAmount.toFixed(2) }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// Props - 允许父组件传入数据
const props = defineProps({
  // 今日汇总数据
  todayData: {
    type: Object,
    default: () => ({
      totalRevenue: 0,
      totalOrders: 0,
      totalAmount: 0,
    }),
  },
  // 详细数据
  detailData: {
    type: Object,
    default: () => ({
      // 营业额相关（6项）
      onlineRevenue: 0,
      onlineRefund: 0,
      offlineRevenue: 0,
      offlineRefund: 0,
      bigRevenue: 0,
      bigRefund: 0,
      // 订单数相关
      receiptOrders: 0,
      refundOrders: 0,
      // 金额相关
      receiptAmount: 0,
      refundAmount: 0,
    }),
  },
});

// 当前选中的tab
const currTab = ref(0);

// tab选项数据
const todayOptions = computed(() => [
  { label: "营业额", value: props.todayData.totalRevenue || 0 },
  { label: "订单数", value: props.todayData.totalOrders || 0 },
  { label: "金额", value: props.todayData.totalAmount || 0 },
]);

// 营业额详细数据
const revenueData = computed(() => ({
  onlineRevenue: props.detailData.onlineRevenue || 0,
  onlineRefund: props.detailData.onlineRefund || 0,
  offlineRevenue: props.detailData.offlineRevenue || 0,
  offlineRefund: props.detailData.offlineRefund || 0,
  bigRevenue: props.detailData.bigRevenue || 0,
  bigRefund: props.detailData.bigRefund || 0,
}));

// 订单数详细数据
const orderData = computed(() => ({
  receiptOrders: props.detailData.receiptOrders || 0,
  refundOrders: props.detailData.refundOrders || 0,
}));

// 金额详细数据
const amountData = computed(() => ({
  receiptAmount: props.detailData.receiptAmount || 0,
  refundAmount: props.detailData.refundAmount || 0,
}));

// 定义 emit
const emit = defineEmits(["tab-change"]);

// 切换tab
const handleChangeTab = (index) => {
  currTab.value = index;
  // 通知父组件 tab 切换了
  emit("tab-change", index);
};

// 暴露给父组件的方法
defineExpose({
  currTab,
  handleChangeTab,
});
</script>

<style lang="scss" scoped>
.tab-item {
  width: 100%;
  background-color: #fffaf2;
  padding: 12rpx 20rpx;
  &.active {
    border-bottom: 2px solid #ffab00;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 15rpx solid transparent;
      border-top: 15rpx solid #ffab00;
      bottom: -28rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.tab-box {
  width: 100%;
  margin-top: 20rpx;
  background-color: #f3f3f3;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
}
</style>
